<script setup lang="ts">
import { reactive, ref, nextTick } from "vue";
import Playground from "./components/Playground.vue";
import SettingPanelVue, { SettingState } from "./components/SettingPanel.vue";
import DataPanelVue, {
  RelativeNode,
  RelativeLink,
  DataPanelNodeEventDetail,
  DataPanelLinkEventDetail,
} from "./components/DataPanel.vue";

const playground = ref();
const nodes = ref([
  {
    name: "卡斯蒂利亚",
    id: "4b0d6mh4l",
  },
  {
    name: "葡萄牙",
    id: "4b0d6npi6",
  },
  {
    name: "那不勒斯",
    id: "4b0d6ogk2",
  },
  {
    name: "阿拉贡",
    id: "4b0d6p3o6",
  },
  {
    name: "纳瓦拉",
    id: "444",
  },
  {
    name: "格拉纳达",
    id: "4b0d6pn56",
  },
  {
    name: "英格兰",
    id: "4b0d6qe10",
  },
] as RelativeNode[]);
let links = ref([
  { source: "4b0d6mh4l", target: "4b0d6npi6", label: "结盟", id: "4b0d140hb" },
  {
    source: "4b0d6mh4l",
    target: "4b0d6p3o6",
    label: "联合统治",
    id: "4b0d15ebq",
  },
  { source: "4b0d6mh4l", target: "444", label: "保证独立", id: "4b0d17nlh" },
  { source: "4b0d6mh4l", target: "4b0d6pn56", label: "宣战", id: "4b0d16ghh" },
  { source: "4b0d6npi6", target: "4b0d6mh4l", label: "结盟", id: "4b0d190bd" },
  { source: "4b0d6npi6", target: "4b0d6qe10", label: "结盟", id: "4b0d1afr7" },
  {
    source: "4b0d6p3o6",
    target: "4b0d6ogk2",
    label: "联合统治",
    id: "4b0d19kpa",
  },
  {
    source: "4b0d6p3o6",
    target: "4b0d6mh4l",
    label: "联合统治",
    id: "4b0d16qfn",
  },
  { source: "4b0d6p3o6", target: "4b0d6pn56", label: "宣战", id: "4b0d18897" },
  { source: "4b0d6pn56", target: "4b0d6mh4l", label: "宣战", id: "4b0d166cj" },
  { source: "4b0d6pn56", target: "4b0d6p3o6", label: "宣战", id: "4b0d18j88" },
  { source: "4b0d6pn56", target: "4b0d6ogk2", label: "宣战", id: "4b0d1a4d8" },
  { source: "4b0d6qe10", target: "4b0d6npi6", label: "结盟", id: "4b0d19bl6" },
  {
    source: "4b0d6ogk2",
    target: "4b0d6p3o6",
    label: "联合统治",
    id: "4b0d17ba2",
  },
  { source: "4b0d6ogk2", target: "4b0d6pn56", label: "宣战", id: "4b0d15phc" },
] as RelativeLink[]);

const options = reactive({
  background: "#f8f8dc",
  width: window.innerWidth - 400,
  height: window.innerHeight,
  nodeStroke: "#333333",
  nodeStrokeWidth: 1,
  nodeRadius: 30,
  nodeLabelFontSize: 13,
  nodeLabelColor: "#333333",
  nodeBackgroundType: "1" as "1" | "2",
  // nodeBackground: "http://159.75.210.117/:8033/sia/img/m1.png",
  nodeBackground: "#FF4533",
  linkStroke: "#999999",
  linkStrokeWidth: 1,
  linkLabelFontSize: 13,
  linkLabelColor: "#333333",
  linkLength: 90,
  forceModelList: ["link", "collision", "charge", "center"],
  dragable: true,
  openBorder: true,
}) as SettingState;

function handleChangeOptions(state: any) {
  Object.assign(options, state);
  playground.value.appendSvg();
}

// 控制弹窗显示
const dataPanel = ref();
function showDataPanel() {
  dataPanel.value.toggleShowDialog(true);
}

// 节点数据修改
function handleChangeNodes(eventDetail: DataPanelNodeEventDetail) {
  console.log(eventDetail);
  const { index, row } = eventDetail;
  nodes.value.splice(index, 1, row);

  playground.value.appendSvg();
}

// 关系数据修改
function handleChangeLinks(eventDetail: DataPanelLinkEventDetail) {
  console.log(eventDetail);
  const { index, row } = eventDetail;
  links.value.splice(index, 1, row);

  playground.value.appendSvg();
}

// 删除节点
function handleDeleteNode(id: string) {
  links.value = links.value.filter(
    (link) => link.source !== id && link.target !== id
  );
  let idx = nodes.value.findIndex((node) => node.id === id);
  nodes.value.splice(idx, 1);
  nextTick(() => {
    playground.value.appendSvg();
  });
}

// 删除关系
function handleDeleteLink(id: string) {
  let idx = links.value.findIndex((link) => link.id === id);
  links.value.splice(idx, 1);
  playground.value.appendSvg();
}
</script>

<template>
  <div class="main-canvas">
    <Playground :data="{ nodes, links }" :options="options" ref="playground" />
    <SettingPanelVue
      @change="handleChangeOptions"
      @showDataPanel="showDataPanel"
    ></SettingPanelVue>
    <DataPanelVue
      ref="dataPanel"
      :nodes="nodes"
      :links="links"
      @on-nodes-change="handleChangeNodes"
      @on-links-change="handleChangeLinks"
      @delete-link="handleDeleteLink"
      @delete-node="handleDeleteNode"
    ></DataPanelVue>
  </div>
</template>

<style scoped>
.main-canvas {
  display: flex;
  flex-direction: row;
  height: 100vh;
  overflow: hidden;
  user-select: none;
}
</style>
